<template>
  <div class="container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="区域号" name="areaNo">
        <el-form ref="dataForm" :model="conModels" label-width="120px" size="mini" class="search_content">
          <el-col :span="4" class="common_input">
            <el-form-item label="默认IC卡区域号:" prop="CustomerNo">
              <el-input v-model="conModels.DefaultAreaNo" clearable placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="1" class="common_query">
            <el-button size="mini" @click="AddRows()"> 添加 </el-button>
          </el-col>
        </el-form>
        <div class="table_content">
          <el-table v-loading="listLoading" :data="list" fit style="width: 100%" :stripe="true" :row-class-name="tableRowClassName">
            <el-table-column label="表计厂家" align="center">
              <template slot-scope="{ row }">
                <el-select v-model="row.FactoryName" :disabled="!row.editModeEnabled" filterable clearable class="filter-item" @change="GetMeterType('add', row.FactoryName)">
                  <el-option v-for="item in listFactory" :key="item.FactoryNo" :label="item.FactoryName" :value="item.FactoryNo" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="表类型" align="center">
              <template slot-scope="{ row }">
                <el-select v-model="row.MeterTypeName" :disabled="!row.editModeEnabled" filterable clearable class="filter-item">
                  <el-option v-for="item in listMeterType" :key="item.MeterTypeNo" :label="item.MeterTypeName" :value="item.MeterTypeNo" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column align="center" label="IC卡区域号">
              <template slot-scope="{ row }">
                <el-input v-model="row.AreaNo" />
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作">
              <template slot-scope="{ row }">
                <span class="common_operation" @click="deleteRow(row)">删除</span>
                <span class="common_operation" @click="preserveRow(row)">保存</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <pagination v-show="total > 0" class="my_pagination" :total="total" :PageIndex.sync="Parameter.PageIndex" :PageSize.sync="Parameter.PageSize" @pagination="getList" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
import {
  GetFactoryType,
  GetMeterType,
  GetAreaNoSettings,
  UpdateAreaNoSettings,
} from '@/api/basics'

var index = 0
export default {
  name: "SetParam",
  components: {
    Pagination,
  },
  data() {
    return {
      Parameter: {
        PageSize: 10,
        PageIndex: 1,
        OrderBy: "BuildTime",
        isDesc: true,
      },
      conModels: {
        DefaultAreaNo: "",
      },
      activeName: 'areaNo',
      listLoading: false,
      list: [],
      total: 0,
      listMeterType: [],
      listFactory: [],
      rowindex: 0,
      editModeEnabled: true,
    };
  },
  created() {
    this.getList();
    this.GetFactoryType("init");
    this.GetMeterType("init");
  },
  methods: {
    AddRows() {
      this.rowindex = this.list.length;
      var index = this.rowindex++;
      var row = {
        index: index,
        AreaNo: this.conModels.DefaultAreaNo,
        FactoryName: "",
        MeterTypeName: "",
        editModeEnabled: true,
      };
      this.list.push(row);
      this.GetFactoryType();
      this.GetMeterType();
    },
    deleteRow(row) {
      this.list.splice(row.index);
    },
    preserveRow(row) {
      if (row.AreaNo.length < 6) {
        this.$message({
          message: "IC卡区域号需要6位数",
          type: "error",
        });
        return;
      }
      if (row.FactoryName === "") {
        this.$message({
          message: "请选择表计厂家",
          type: "error",
        });
        return;
      }
      if (row.MeterTypeName === "") {
        this.$message({
          message: "请选择表计类型",
          type: "error",
        });
        return;
      }
      var factory = this.listFactory.filter((item) => {
        return (
          item.FactoryNo == row.FactoryNo || item.FactoryNo == row.FactoryName
        );
      });
      var meterType = this.listMeterType.filter((item) => {
        return (
          item.MeterTypeNo === row.MeterTypeNo ||
          item.MeterTypeNo === row.MeterTypeName
        );
      });

      var Parameter = {
        DefaultAreaNo: this.conModels.DefaultAreaNo,
        MeterAreaNos: [
          {
            MeterTypeCode: meterType[0].MarkCode,
            MeterTypeName: meterType[0].MeterTypeName,
            MeterTypeNo: meterType[0].MeterTypeNo,
            FactoryCode: factory[0].MarkCode,
            FactoryName: factory[0].FactoryName,
            FactoryNo: factory[0].FactoryNo,
            AreaNo: row.AreaNo,
          },
        ],
      };

      UpdateAreaNoSettings(Parameter).then((res) => {
        if (res.State === "success") {
          this.$message({
            message: res.Result || "操作成功",
            type: "success",
          });
          this.getList();
        }
      });
    },
    handleClick(tab, event) {
      switch (this.activeName) {
        case "areaNo":
          return this.getList();
        default:
          return "暂无数据";
      }
    },
    getList() {
      this.listLoading = true;
      GetAreaNoSettings().then((res) => {
        this.listLoading = false;
        this.GetMeterType();
        this.GetFactoryType();
        this.list = res.Data.MeterAreaNos;
        this.conModels.DefaultAreaNo = res.Data.DefaultAreaNo;
      });
    },

    // 表计类型
    GetMeterType(init, FactoryName) {
      var Parameter = {
        PageSize: 99999,
        PageIndex: 1,
        OrderBy: "CalcTypeCode",
        isDesc: true,
        FactoryNo: FactoryName,
      };
      GetMeterType(Parameter).then((res) => {
        this.listMeterType = res.Data;
        if (init !== "init") {
          this.list[index].listMeterType = this.listMeterType;
          if (this.listMeterType.length == 0) {
            this.list[index].MeterTypeName = "";
            this.list[index].MeterTypeCode = "";
          }
        }
      });
    },
    // 表计厂家
    GetFactoryType(init) {
      var Parameter = {
        PageSize: 99999,
        PageIndex: 1,
        OrderBy: "FactoryNo",
        isDesc: true,
      };
      GetFactoryType(Parameter).then((res) => {
        this.listFactory = res.Data;
        if (init !== "init") {
          this.list[index].listFactory = this.listFactory;
          this.list[index].editModeEnabled = false;
        }
      });
    },
    tableRowClassName({ row, rowIndex }) {
      // 把每一行的索引放进row
      row.index = rowIndex;
    },
  },
}
</script>

<style scoped></style>
